Bootstrap日期选择器插件bootstrap

您所在的位置：网站首页 › bootstrap 插件 › Bootstrap日期选择器插件bootstrap

Bootstrap日期选择器插件bootstrap

#Bootstrap日期选择器插件bootstrap| 来源: 网络整理| 查看: 265

bootstrap-datepicker是一款Bootstrap日期选择器插件。该日期选择器插件支持多种语言，可通过配置参数设置日期选择器，日期范围选择器等，功能非常强大。

安装

可以通过npm、bower或yarn来安装bootstrap-datepicker日期选择器插件。

# Yarn yarn add bootstrap-datepicker # NPM npm install bootstrap-datepicker # Bower bower install bootstrap-datepicker 使用方法

在页面中引入bootstrap相关文件，jquery和bootstrap-datepicker3.css，以及bootstrap-datepicker.js文件。

如果需要使用i18n文件，还需要引入相应的js文件，例如简体中文需要引入bootstrap-datepicker.zh-CN.min.js文件。

HTML结构

可以直接在元素上添加data-provide="datepicker"属性直接将它转换为一个日期选择器。如果需要内联的日期选择器，可以使用data-provide="datepicker-inline"。例如：

如果需要一个容器，可以使用下面的代码：

初始化插件

在页面DOM元素加载完毕之后，可以通过datepicker()方法来初始化bootstrap-datepicker日期选择器插件。

$('.datepicker').datepicker(); 配置参数

bootstrap-datepicker日期选择器插件可用的配置参数如下：

$('input').datepicker({ assumeNearbyYear: false, autoclose: false, // Callback functions beforeShowDay: $.noop, beforeShowMonth: $.noop, beforeShowYear: $.noop, beforeShowDecade: $.noop, beforeShowCentury: $.noop, calendarWeeks: false, clearBtn: false, toggleActive: false, daysOfWeekDisabled: [], daysOfWeekHighlighted: [], datesDisabled: [], endDate: Infinity, forceParse: true, format: 'mm/dd/yyyy', keepEmptyValues: false, keyboardNavigation: true, language: 'en', minViewMode: 0, maxViewMode: 4, multidate: false, multidateSeparator: ',', orientation: "auto", rtl: false, startDate: -Infinity, startView: 0, todayBtn: false, todayHighlight: false, updateViewDate: true, weekStart: 0, disableTouchKeyboard: false, enableOnReadonly: true, showOnFocus: true, zIndexOffset: 10, container: 'body', immediateUpdates: false, title: '', templates: { leftArrow: '«', rightArrow: '»' }, showWeekDays: true }); 方法

bootstrap-datepicker日期选择器插件可用的API方法有：

// shows the date picker $('input').datepicker('show'); // hides the date picker $('input').datepicker('hide'); // Clear the dates $('input').datepicker('clearDates'); // Destroys the date picker $('input').datepicker('destroy'); // Updates the date picker $('input').datepicker('update', DATE); // Sets a new date $('input').datepicker('setDate', DATE); // Sets a new date $('input').datepicker('setUTCDate', DATE); // Sets an array of dates $('input').datepicker('setDates', DATE); // Sets an array of UTC dates $('input').datepicker('setUTCDates', DATE); // Returns a localized date object $('input').datepicker('getDate'); // Returns a list of localized date objects $('input').datepicker('getDates'); // Returns a list of localized date objects $('input').datepicker('getUTCDates'); // Returns the lower date limit on the datepicker $('input').datepicker('getStartDate'); // Returns the upper date limit on the datepicker $('input').datepicker('getEndDate'); // Sets a new lower date limit on the datepicker $('input').datepicker('setStartDate', DATE); // Sets a new upper date limit on the datepicker $('input').datepicker('setEndDate', DATE); // Sets the days that should be disabled. $('input').datepicker('setDatesDisabled', DATE); // Sets the days of week that should be disabled. $('input').datepicker('setDaysOfWeekDisabled', DATE); // Sets the days of week that should be highlighted $('input').datepicker('setDaysOfWeekHighlighted', DATE);

bootstrap-datepicker日期选择器插件的github地址为：https://github.com/uxsolutions/bootstrap-datepicker

【本文地址】

Bootstrap日期选择器插件bootstrap

Bootstrap日期选择器插件bootstrap

今日新闻

推荐新闻